<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ipad</title>
    <link rel="stylesheet" href="css/ipad.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2106050_j8wqjdbpel9.css">
</head>

<body>
    <div class="container">
        <div class="center">
            <div class="left">
                <div class="left-one">
                    <img src="images/组-1.png" alt="">
                </div>
                <div class="left-two">
                    <p><i class="iconfont icon-iconzhengli-"></i>&nbsp;黑侠（光谷店）</p>
                    <p><i class="iconfont icon-shizhong"></i>&nbsp;2016-04-06&nbsp;10:23&nbsp;AM</p>
                </div>
                <div class="left-three">
                    <p><i class="iconfont icon-icon--"></i>&nbsp;收支明细</p>
                </div>
                <div class="left-four">
                    <div class="icons">
                        <ul>
                            <li><i class="iconfont icon-cheng"></i></li>
                            <li><i class="iconfont icon-icon-"></i></li>
                            <li><i class="iconfont icon-jian"></i></li>
                            <li><i class="iconfont icon-servicezengyunfeixian"></i></li>
                            <li><i class="iconfont icon-jizhang"></i></li>
                            <li><i class="iconfont icon-gua"></i></li>
                            <li><i class="iconfont icon-order"></i></li>
                        </ul>
                    </div>
                    <div class="four-one">
                        <ul>
                            <li>品名</li>
                            <li>数量</li>
                            <li>金额</li>
                            <li>结算价</li>
                        </ul>
                    </div>
                    <div class="four-two">
                        <ul>
                            <li>蛋挞</li>
                            <li>5</li>
                            <li>60</li>
                            <li>60</li>
                        </ul>
                    </div>
                    <div class="four-three">
                        <ul>
                            <li>全麦面包</li>
                            <li>1</li>
                            <li>10.5</li>
                            <li>10.5</li>
                        </ul>
                    </div>
                    <div class="four-four">
                        <div class="zeng">

                        </div>
                        <ul>
                            <li>戚风蛋糕</li>
                            <li>1</li>
                            <li>20</li>
                            <li>0</li>
                        </ul>
                    </div>
                    <div class="four-five">
                        <ul>
                            <li>三明治</li>
                            <li>5</li>
                            <li>60</li>
                            <li>60</li>
                        </ul>
                    </div>
                    <div class="four-six">

                    </div>
                    <div class="four-seven">
                        <div class="seven-top">
                            <p>总额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥125.5</p>
                        </div>
                        <div class="seven-down">
                            <div class="down-one">
                                <input type="text" placeholder="搜索商品">
                                <i class="iconfont icon-quxiao"></i>
                            </div>
                            <div class="down-two">
                                <i class="iconfont icon-soushuo"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-one">

                </div>
                <div class="right-two">
                    <ul>
                        <li>戚风蛋糕</li>
                        <li>蛋挞</li>
                        <li>全麦面包</li>
                        <li>戚风蛋糕</li>
                        <li>三明治</li>
                        <li><i class="iconfont icon-jiantou_shangxiaqiehuan"></i></li>
                    </ul>
                </div>
                <div class="right-three">
                    <div class="three-top">

                    </div>
                    <div class="three-down">
                        <ul>
                            <li>
                                <div class="kuai">
                                    <div class="numone">
                                        <p class="num">001</p>
                                        <p class="type">巧克力蛋糕</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="huodong">

                                </div>
                                <div class="kuai">
                                    <div class="numone">
                                        <p class="num">001</p>
                                        <p class="type">巧克力蛋糕</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="kuai">
                                    <div class="numone">
                                        <p class="num">001</p>
                                        <p class="type">巧克力蛋糕</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="kuai">
                                    <div class="numone">
                                        <p class="num">001</p>
                                        <p class="type">巧克力蛋糕</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="kuai">
                                    <div class="numone">
                                        <p class="num">001</p>
                                        <p class="type">巧克力蛋糕</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-left">
                <p>会员信息：</p>
            </div>
            <div class="footer-right">
                <ul>
                    <li>
                        <i class="iconfont icon-set"></i><br>
                        <a href="#">管理台</a>
                    </li>
                    <li>
                        <i class="iconfont icon-gouwuka"></i><br>
                        <a href="#">购物卡</a>
                    </li>
                    <li>
                        <i class="iconfont icon-huiyuan"></i><br>
                        <a href="#">会员</a>
                    </li>
                    <li>
                        <i class="iconfont icon-cuxiao"></i><br>
                        <a href="#">促销</a>
                    </li>
                    <li>
                        <i class="iconfont icon-yuding"></i><br>
                        <a href="#">预定</a>
                    </li>
                    <li>
                        <i class="iconfont icon-workclock"></i><br>
                        <a href="#">交班</a>
                    </li>
                    <li>
                        <i class="iconfont icon-guadan"></i><br>
                        <a href="#">挂单</a>
                    </li>
                    <li>
                        <i class="iconfont icon-qiandai"></i>
                        <a href="#">收银</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>